<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
</head>
<style>
    #div1{
        background: #00ff00;
        width: 200px;
        height: 200px;
        position: absolute;
    }
</style>
<body>
<div id="div1"></div>
<script>
     var oDiv=document.getElementById("div1");
     oDiv.onmousedown = function (e) {
      var   disX = e.clientX - oDiv.offsetLeft;
      var   disY = e.clientY - oDiv.offsetTop;
         document.onmousemove=function (e) {
             oDiv.style.left = e.clientX - disX + "px";
             oDiv.style.top = e.clientY - disY + "px";
         }
         oDiv.onmouseup = function () {
             document.onmousemove = null;
         };
     }
</script>
</body>
</html>